<h1>Creating the first Graphical Component: the component itself</h1>
<ul>
	<li>We'll now create a Graphical Component that uses the powerful
	template system.</li>
	<li>Create a file "graphical.js" in "Example/components" then fill
	it with this: <pre>
Component.Extend(["Archetype.component.graphicalComponent"], {
	name:"Example.components.graphical",
	/**
	 * Set up the Component dependencies
	 */
	setup:{
		dependencies: {
			components:{clickController: "Example.components.controller"},
			lib:[],
			css:[],
			html:{main: "Example.templates.graphical"}
		}
	},
	//-----hard coded initial values-----
	max: 5,
	table: ["a","b","c","d","e"],
	//-----------------------------------
	/**
	 * Start the Component itself
	 * @constructor
	 */
	initialize: function() {
		this.options = {
			max: this.max,
			date: new Date(0),
			table: this.table
		}
		this.anchor = $("bodyContent");
		
		Logger.debug("Example graphical component instanciates a new controller...");
		new this.components.clickController();
		
		Logger.debug("Example graphical component : rendering template!");
		this.render(this.anchor);

	},
	/**
	 * Listen to "DateUpdate" event
	 */
	onDateUpdate: function(eventName, date) {
		Logger.log("graphical received a date:" + date);
        this.options.date = date;
		this.render(this.anchor);
	},
	/**
	 * Render the Component view and return it
	 */
	renderViewAsString: function() {
		return this.templates.main.evaluate(this.options);
	}
});
	</pre></li>


	<li><strong>Now click on the page to go next page</strong></li>
</ul>
